<template>
<el-dialog
    class="website-sort-cp"
    title="网址排序(左边拖动排序，右边预览)" 
    :visible.sync="show" 
    append-to-body
    top="50px"
    width="940px">
    <div class="container border-radius_2">
        <div class="left no-scrollbar">
            <draggable
                class="container"
                v-model="dataList"
                chosenClass="chosen"
                forceFallback="true"
                animation="100">
                <transition-group>
                    <div 
                        v-for="item in dataList" 
                        :key="item.id">
                        <SortItem 
                            :item="item"
                            :currentType="currentType">
                        </SortItem>
                    </div>
                </transition-group>
            </draggable>
        </div>
        <div class="right no-scrollbar">
            <div class="all-type">
                <div 
                    :class="{
                        'border-radius_1':true,
                        'item':true,
                        'on-item':item==currentType,
                    }" 
                    v-for="(item,index) in typeList" 
                    :key="index"
                    @click="currentType = item">
                    {{item}}
                </div>
            </div>
            <div class="container">
                <SortItem
                    v-for="item in userWebsitesObj[currentType]"
                    :key="item.id"
                    :item="item"
                    :currentType="currentType">
                </SortItem>
            </div>
        </div>
    </div>
    <div slot="footer" class="footer">
        <span>
            排序规则：先按照顺序排列类型（先找到的排前面），然后根据类型找出所有的网站。
        </span>
        <el-button 
            type="primary"
            :loading="loading"
            icon="el-icon-success"
            @click="onSave">
            保存    
        </el-button>
        <el-button 
            @click="resetData"
            type="danger">
            重 置
        </el-button>
        <el-button 
            @click="show = false"
            type="danger"
            plain>
            取 消
        </el-button>
    </div>
</el-dialog>
</template>

<script>
/*
 网站排序对话框
 */
import draggable from "vuedraggable";
import {throttleFn} from '@/common/DebounceAndThrottle';
import {getUserWebsitesObj,getUserWebsiteTypes} from '@/common/Tools'; 
import SortItem from './components/SortItem';
export default {
    name:"WebsiteSort",
    components:{draggable,SortItem},
    data() {
        this.oldDataList = [];  //旧列表
        return {
            show:false,
            loading:false,
            currentType:undefined,
            dataList:[],
        };
    },
    computed:{
        userWebsitesObj(){  //全局的网站对象化的数据 类型为键
            return getUserWebsitesObj(this.dataList);
        },
        typeList(){ //全局添加的网站的所有类型
            return getUserWebsiteTypes(this.dataList);
        },
    },
    watch:{
        typeList:{  //监听获取网站类型数组，初始化选择第一个
            handler(newValue){
                if(newValue.indexOf(this.currentType)==-1){
                    this.currentType = newValue[0];
                }
            },
            immediate:true,
        },
    },
    methods: {
        initData({show=true,data=[]}={}){  //初始化数据(外部调用)
            this.oldDataList = data;
            let dataList = JSON.parse(JSON.stringify(this.oldDataList)) || [];
            dataList = dataList.filter(item=>{  //数组去空
                return !!item;
            });
            this.dataList = dataList;
            this.show = !!show;
        },
        resetData(){  //重置列表
            this.dataList = JSON.parse(JSON.stringify(this.oldDataList));
        },
        onSave:throttleFn(function(){  //保存排序
            if(this.loading) return;
            this.loading = true;
            let orderList = this.dataList.map(item=>{
                return item.id;
            });
            this.$Api.updateSearchConfig({
                order:orderList.join(','),
            }).then(()=>{
                this.$message({
                    message: '排序成功',
                    offset:55,
                    type: 'success',
                });
                this.$store.commit(
                    'user/setUserWebsiteList',
                    JSON.parse(JSON.stringify(this.dataList)),  //防止删除网站后排序莫名恢复的错误
                );
                this.show=false;
            }).finally(()=>{
                this.loading = false;
            });
        },700),
    }
};
</script>
<style lang="scss" scoped>
.website-sort-cp{
    --my-height:60vh;
    .container{
        width:100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1px;
        margin-bottom: 20px;
        border:1px solid #ebedf1;
        background-color: #ebedf1;
        user-select: none;
        >.left{
            background-color: rgb(238, 238, 238);
            max-height:var(--my-height);
            .container{
                height: fit-content;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                span{
                    display: grid;
                    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
                    grid-gap:10px;
                    >.item{
                        cursor: pointer;
                    }
                }
            }
        }
        >.right{
            background-color: white;
            max-height:var(--my-height);
            >.all-type{
                height: fit-content;
                display: flex;
                flex-wrap: wrap;
                width: fit-content;
                align-items: center;
                width: 100%;
                border-bottom: 1px solid #ebedf1;
                padding: 10px;
                box-sizing: border-box;
                position: sticky;
                top: 0;
                z-index: 999;
                background-color: white;
                >.item{
                    font-size: 13px;
                    margin-right: 10px;
                    cursor: pointer;
                    transition: all 0.2s;
                    line-height: 1;
                    color: #8590a6;
                    padding: 10px 0;
                    min-width: 10px;
                }
                >.on-item{
                    padding: 10px;
                    font-weight: bold;
                    background-color: rgba(0,132,255,.08);
                    color: #0084ff;
                }
            }
            >.container{
                height: fit-content;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
                grid-gap:10px;
                padding: 10px;
                box-sizing: border-box;
                /deep/.web_item_cp {
                    pointer-events: none;
                    background-color: #eeeeee;
                }
            }
        }
    }
    .footer{
        span{
            font-size: 13px;
            margin-right: 10px;
            color: #a2a2a2;
        }
    }
}
</style>